<template>
	<view class="main animated fadeIn faster " style="position: relative;">
		<view class="pt-10 m-0">
			<view class="rounded20"
				style="background-color: white; display: flex;justify-content: space-between; padding: 0 20px;">
				<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/28145220.png"
					style="width:35px;height: 35px; position: relative; left: -10rpx;" mode="heightFix" @click="goback">
				</image>
				<view v-if="isAPP" class="bg2 rounded50 py-3 text-center colorfff font30" @click="commit()" :class="{ 'bg-blue': hasContentOrImages }">发布</view>
			</view>
			<view style=" position: relative;">
				<view class="textarea-like" :style="{width: '90%', margin: '0 auto', height: '520rpx'}">
					<view class="topic-list" v-if="tag1.length || CustomizeTagList.length > 0">
						<view v-for="(tag, index) in tag1" :key="index" class="topic-box">
							<view class="topic-content">
								<text class="topic-hash">#</text>
								<text class="topic-name">{{ tag }}</text>
							</view>
						</view>
						<view v-for="(tag, index) in tag2" :key="index" class="topic-box">
							<view class="topic-content">
								<text class="topic-hash">#</text>
								<text class="topic-name">{{ tag }}</text>
							</view>
						</view>
					</view>

					<textarea class="font30" v-model="textareaContent" placeholder="分享生活兴趣..." @focus="handleFocus" @blur="handleBlur" style="width: 100%; overflow-y: auto; height:160rpx"></textarea>
					<view class="mt-6">
						<view class="selectBox m-1" v-for="(img, index) in imgs" :key="index" style="display: inline-block;">
							<image :src="img" class="img3" @click="previewImage(img)" mode="aspectFill"></image>
							<view class="delete-btn" @click.stop="removeImage(index)">
								<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/28145220.png" class="delete-icon"></image>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="tags-container" :style="[{bottom: (bottomIconsPosition + 45) + 'px'}]">
				<view class="tag" v-for="tag in tag1" :key="tag">
					#{{ tag }}
					<view class="delete-btn1" @click="removetag1(1, tag, index)">
						<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/28145220.png" class="delete-icon1"></image>
					</view>
				</view>
				<view class="tag" v-for="tag in tag2" :key="tag">
					#{{ tag }}
					<view class="delete-btn1" @click="removetag1(2, tag, index)">
						<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/28145220.png" class="delete-icon1"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="box1 d-flex d-flex-middle" :style="{ bottom: bottomIconsPosition + 'px' }">
			<image 
				class="img1 pl-3"
				src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20241128170718.png" mode="heightFix" 
				@click="addimg"
			></image>
			<!-- <image class="img1"
				src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20241128170711%20-%20%E5%89%AF%E6%9C%AC.png"
				mode="heightFix" @click="unopen"></image>
			<image class="img1"
				src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20241128170724.png"
				mode="heightFix" @click="unopen"></image>
			<image class="img1" src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/20241128180215.png"
				mode="heightFix" @click="unopen"></image> -->
			<view class="font-bold font26 d-flex-btn ml-3 py px-3 rounded30" style="border: 1px solid #ccc;" @click="open()" ># 话题</view>
		</view>
		
		<uni-popup ref="Tagpopup" class="popup" background-color="#fff" type="bottom"
			border-radius="16px 16px 16px 16px" style="z-index: 999;">
			<view class="d-flex" style="display: flex;flex-direction: column;height: 80vh;">
				<view class="font-bold font30 d-flex-align mt-7 " style="display: flex;justify-content: center;">
					添加话题</view>
				<view
					:class="{ 'font30 font-bold colorblue': preselectTags.length!==0 || CustomizeTagList.length!==0, 'font30 font-bold bg-grey': preselectTags.length==0 && CustomizeTagList.length==0 }"
					style="position: relative;left: 663rpx;top: -41rpx;"
					@click="preselectTags.length==0 && CustomizeTagList.length==0 ? null : AddTag()">添加</view>
				<view class="container111"
					style="width: 85%; position: relative; left: 60rpx;background-color: #f5f6fa; border-radius: 32px;">
					<text class="iconfont icon-sousuo"
						style="left: 40rpx;position: absolute;top: 27rpx; color: #e3e4e8"></text>
					<input class="input pl-1" @input="handleInput" :value="inputText" type="text"
						placeholder="搜索话题可以获得更多互动"
						style="width: 100%;margin-left: 77rpx; height: 74rpx;border-radius: 32px;border-left: none;">
				</view>
				<view v-if="!inputText">
					<view class="font-bold font30" style="position: relative;left: 66rpx;top: 89rpx;">已选话题
						{{preselectTags.length + CustomizeTagList.length}}/3</view>
					<view
						style="position: relative;height: 70rpx; top: 113rpx;left: 53rpx; display: flex; flex-wrap: wrap;">
						<view class="tag" v-for="(tag, index) in preselectTags" :key="index">
							#{{tag.name}}
							<view class="delete-btn1" @click="removepretag(1, index)">
								<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/28145220.png" class="delete-icon1"></image>
							</view>
						</view>
						<view class="tag" v-for="(tag, index) in CustomizeTagList" :key="index">
							#{{tag.name}}
							<view class="delete-btn1" @click="removepretag(2, index)">
								<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/28145220.png" class="delete-icon1"></image>
							</view>
						</view>
					</view>
					<view v-if="showjilu" style="display: flex;position: relative;top: -100rpx;">
						<view class="d-flex-column" style="position: relative;top: 14rpx;">
							<view class="font-bold font30"
								style="position: relative;left: 66rpx;top: 290rpx; display: flex; width: 140rpx;">
								历史记录</view>
							<image
								src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E5%88%A0%E9%99%A4.png"
								@click="deletjilu()"
								style="position: relative;top: 251rpx; width: 35rpx;height: 35rpx;right: -675rpx;">
							</image>
						</view>
						<view
							style="position: relative;display: flex; top: 356rpx;left: -60rpx; white-space: normal; overflow-wrap: break-word; flex-wrap: wrap;">
							<view class="tag1" v-for="(tag, index) in jilu" :key="index" @click="addPreTags(index)">#{{tag.name}}</view>
						</view>
					</view>
				</view>
				<view v-if="inputText && tags.length === 0" style="position: relative;top: 20rpx; left: 63rpx;">
					<view 
						style="border-bottom: 2px solid #f0f0f0;line-height: 70rpx;width: 86%;" 
						class="d-flex d-flex-middle d-flex-between"
						@click="addCustomizeTag"
					>
						<view class=""># {{inputText}}</view>
						<view class="font22">（自定义话题）</view>
					</view>
				</view>
				<view v-if="tags.length > 0 && inputText" style="position: relative; top: 20rpx;left: 63rpx;">
					<view v-for="(tag, index) in tags" :key="index"
						style="border-bottom: 2px solid #f0f0f0;line-height: 70rpx;width: 86%;"
						@click="addTags(tag.name, tag.id)">
						#{{tag.name}}
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { blogApi } from '@/http/blogApi.js'
	import { uploadImageApi } from '../../http/uploadImage';
	import store from '@/store/index.js';
	import { mapActions } from 'vuex'
	export default {
		data() {
			return {
				// 用于存储每个图片上传结果的数组
				topicsWithIds: [], //带有id的话题数组
				uploadResults: [],
				params: {}, //传的参数
				ctype: 0,
				bottomBarHeightRpx: null,
				screenHeight: null,
				inputText: "", // 绑定的数据
				bottomIconsPosition: 0, // 底部图标的初始位置
				textareaContent: '', // 绑定到textarea的数据
				publishing: false,
				tag1: [],
				tag2: [],
				tags: [], // 标签数组
				CustomizeTagList: [], // 自定义话题数组
				preselectTags: [], // 预选的话题
				jilu: uni.getStorageSync('historyTag') || [], //历史记录数据
				selectTags: [], // 选择的标签数组
				imgs: [],
				param: { //话题参数
					pageIndex: 1,
					pageSize: 9,
					name: ""
				},
				isAPP: '',
				flag: true, //是否是添加话题
				showjilu: true, //显示记录
				isTagPopupOpen: false, //判断弹窗是否打开
				imgIndexes: {}, // 用于存储每张图片的索引
				keyboardHeight: 0, // 键盘高度，
				isInputFocused: false
			}
		},
		onShow() {
			this.listenKeyboardHeightChange(); // 监听键盘高度变化
		},
		onPullDownRefresh() {
			if (this.isTagPopupOpen) {
				this.param.pageIndex += 1;
				this.queryBlogTopicListData();
			}
		},
		methods: {
			...mapActions('permissionToast', ['requstPermission']),
			AddTag() {
				uni.hideKeyboard();
				if (this.preselectTags.length + this.CustomizeTagList.length > 0) {
					this.tag1 = this.preselectTags.map(item => item.name);
					this.tag2 = this.CustomizeTagList.map(item => item.name);
					this.params.topicNames = this.tag1.join(',');
					this.params.topicIds = this.preselectTags.map(item => item.id).join(',');
					console.log(this.tag1, this.tag2);
					this.$refs.Tagpopup.close();
					this.isTagPopupOpen = false;
				} else {
					uni.showToast({
						title: '还没有选择话题',
						icon: 'none',
						duration: 1000
					});
				}
			},
			changType(type) {
				this.ctype = type
			},
			removetag1(type, tag, index) {
				if(type == 1) {
					this.tag1.splice(index, 1);
					this.preselectTags.splice(index, 1);
					// 更新参数
					this.params.topicNames = this.tag1.join(',');
					this.params.topicIds = this.preselectTags.map(t => t.id).join(',');
				} else {
					this.tag2.splice(index, 1);
					this.CustomizeTagList.splice(index, 1);
				}
			},
			removepretag(type, index) {
				if(type == 1) {
					this.preselectTags.splice(index, 1);
				} else {
					this.CustomizeTagList.splice(index, 1);
				}
			},
			addPreTags(index) {
				let isExist = true
				if(this.jilu[index].id) {
					this.preselectTags.forEach(item => {
						if(item.id == this.jilu[index].id) {
							isExist = false
							return
						}
					})
				} else {
					this.CustomizeTagList.forEach(item => {
						if(item.name == this.jilu[index].name) {
							isExist = false
							return
						}
					})
				}
				if (!isExist) {
					uni.showToast({
						title: '该话题已选择',
						icon: 'none',
						duration: 1000
					});
					return
				}
				if(this.jilu[index].id) {
					if (this.preselectTags.length + this.CustomizeTagList.length < 3) {
						this.preselectTags.push({
							name: this.jilu[index].name,
							id: this.jilu[index].id
						});
					} else {
						// 可选：提示已达到最大数量
						uni.showToast({
							title: '最多选择3个话题',
							icon: 'none',
							duration: 1000
						});
					}
				} else {
					if (this.preselectTags.length + this.CustomizeTagList.length < 3) {
						this.CustomizeTagList.push({
							name: this.jilu[index].name
						});
					} else {
						// 可选：提示已达到最大数量
						uni.showToast({
							title: '最多选择3个话题',
							icon: 'none',
							duration: 1000
						});
					}
				}
			},
			//删除记录
			deletjilu() {
				this.jilu = []
				uni.setStorageSync('historyTag', []);
				console.log(this.jilu);
			},
			addCustomizeTag() {
				let isExist = true
				this.CustomizeTagList.forEach(item => {
					if(item.name == this.inputText) {
						isExist = false
						return
					}
				})
				if (!isExist) {
					uni.showToast({
						title: '该话题已选择',
						icon: 'none',
						duration: 1000
					});
					return
				}
				if (this.preselectTags.length + this.CustomizeTagList.length < 3) {
					this.CustomizeTagList.push({
						name: this.inputText
					});
					if(this.jilu.length == 0) {
						this.jilu.push({
							name: this.inputText
						});
						uni.setStorageSync('historyTag', this.jilu);
						this.inputText = ""
					} else {
						let flag = true
						this.jilu.forEach(item => {
							if(item.name == this.inputText) {
								flag = false
								return
							}
						})
						if(flag) {
							this.jilu.push({
								name: this.inputText
							});
							uni.setStorageSync('historyTag', this.jilu)
							this.inputText = ""
						}
					}
					if (!this.showjilu) {
						this.showjilu = true;
					}
				} else {
					// 可选：提示已达到最大数量
					uni.showToast({
						title: '最多选择3个话题',
						icon: 'none',
						duration: 1000
					});
				}
				
				// const isExist = this.CustomizeTagList.some(i => i === this.inputText);
				// if (isExist) {
				// 	uni.showToast({
				// 		title: '该话题已选择',
				// 		icon: 'none',
				// 		duration: 1000
				// 	});
				// 	return
				// }
				// if (this.CustomizeTagList.length + this.CustomizeTagList.length < 3) {
				// 	this.CustomizeTagList.push({
				// 		name: this.inputText
				// 	})
				// 	this.jilu.push({
				// 		name: this.inputText
				// 	})
				// 	uni.setStorageSync('historyTag', this.jilu)
				// } else {
				// 	uni.showToast({
				// 		title: '最多选择3个话题',
				// 		icon: 'none',
				// 		duration: 1000
				// 	});
				// }
				// this.inputText = ""
				// console.log(this.CustomizeTagList);
			},
			addTags(tag, id) {
				if (this.preselectTags.length + this.CustomizeTagList.length < 3) {
					const exists = this.preselectTags.some(t => t.name === tag);
					if (!exists) {
						this.preselectTags.push({
							name: tag,
							id: id
						});
						console.log(this.jilu.length);
						if(this.jilu.length == 0) {
							this.jilu.push({
								name: tag,
								id: id
							});
							uni.setStorageSync('historyTag', this.jilu);
						} else {
							let flag = true
							this.jilu.forEach(item => {
								if(item.name == tag) {
									flag = false
									return
								}
							})
							if(flag) {
								this.jilu.push({
									name: tag,
									id: id
								});
								uni.setStorageSync('historyTag', this.jilu)
							}
						}
						if (!this.showjilu) {
							this.showjilu = true;
						}
						this.inputText = '';
						this.tags = [];
					} else {
						uni.showToast({
							icon: 'none',
							title: '此话题已添加~',
							duration: 1500
						})
					}
				} else {
					uni.showToast({
						icon: 'none',
						title: '最多可添加3个话题哟~',
						duration: 1500
					})
				}
			},
			handleInput(event) {
				this.inputText = event.detail.value;
				if (this.inputText == '') {
					this.tags = [];
				} else {
					this.param.name = this.inputText;
					this.queryBlogTopicListData(this.param);
				}
			},
			open() {
				if(this.tag1.length + this.tag2.length >= 3){
					uni.showToast({
						icon: 'none',
						title: '最多可添加3个话题哟~',
						duration: 1500
					})
					return
				}
				this.$refs.Tagpopup.open();
				this.bottomIconsPosition = this.bottomBarHeightRpx;
				this.isTagPopupOpen = true;
			},
			// 查询话题
			async queryBlogTopicListData(param) {
				let res = await blogApi.queryBlogTopicList(this.param);
				const records = res.records;
				// 清空原有数据
				this.tags = [];
				// 遍历records数组，保存完整对象
				records.forEach(record => {
					// 将整个对象存入tags数组，包含name和id
					this.tags.push({
						name: record.name,
						id: record.id
					});
				});
			},
			checkRealNaem() { //判断是否实名
				// if (this.$store.state.user.realName == '' || this.$store.state.user.realName == null) {
				// 	return false
				// } else {
				// 	return true
				// }
				return true
			},
			commit() {
				if (this.publishing) return
				if (this.checkRealNaem()) {
					if (this.textareaContent.trim() === '') {
						uni.showToast({
							title: '请输入内容',
							icon: 'none',
							duration: 2000
						});
						return;
					}
					this.publishing = true
					this.params.remark = this.textareaContent;
					// this.params.categoryId=4;//分类
					if (this.tag1 && this.tag1.length > 0) {
						this.params.topicNames = this.tag1.join(',');
					}
					if (this.uploadResults.length > 0) {
						this.uploadResults.forEach((src, index) => {
							const propertyName = `screenshot${index + 1}`;
							this.params[propertyName] = src;
						});
					}
					if (this.tag2 && this.tag2.length > 0) {
						this.params.customizedTopicNames = ""
						this.tag2.forEach((item, idx) => {
							if(idx !== this.tag2.length - 1) {
								this.params.customizedTopicNames += item + ','
							} else {
								this.params.customizedTopicNames += item
							}
						})
					}
					console.log(this.params);
					this.postBlog();
				} else {
					uni.showModal({
						content: '你还没有完成实名认证，请先完成实名认证？',
						confirmText: '去实名',
						success: (res) => {
							if (res.confirm) {
								uni.navigateTo({
									url: `/pagesApp/RealName/RealName`
								});
							}
						}
					});
				}
			},
			async postBlog() {
				let res = await blogApi.postBlog(this.params);
				uni.showToast({
					title: '动态发布成功，正在审核',
					icon: 'none', // 使用'none'图标，只显示文字
					duration: 2000 // 显示持续时间
				});
				setTimeout(() => {
					uni.navigateBack({
						delta: 1
					});
				}, 1000);
			},
			listenKeyboardHeightChange() {
				uni.onKeyboardHeightChange(res => {
					if (res.height > 0) {
						// #ifdef MP-WEIXIN
							this.bottomIconsPosition = res.height + 10;
						// #endif

						// #ifdef APP-PLUS
							this.bottomIconsPosition = res.height + 10;
						// #endif
					} else {
						this.bottomIconsPosition = this.bottomBarHeightRpx;
					}
				});
			},
			previewImage(img) {
				uni.previewImage({
					current: img, // 当前显示图片的链接
					urls: this.imgs // 需要预览的图片链接列表
				});
			},
			removeImage(index) {
				this.imgs.splice(index, 1);
				console.log(this.imgs);
			},
			handleFocus() {
				// #ifdef MP-WEIXIN
				this.bottomIconsPosition = this.keyboardHeight + 140;
				// #endif

				// #ifdef APP-PLUS
				this.bottomIconsPosition = this.keyboardHeight;
				// #endif

				uni.pageScrollTo({
					scrollTop: 0,
					duration: 100
				});
			},
			handleBlur() {
				// 如果没有显示相机或图片，底部图标回到底部
				this.bottomIconsPosition = this.bottomBarHeightRpx;
			},
			uploadImage(imageInfo) {
				uploadImageApi.Upload(imageInfo)
					.then(response => {
						this.uploadResults.push(response.data);
					})
			},
			goback() {
				if (this.hasContentOrImages) {
					uni.showModal({
						content: '退出后数据将会丢失，确定要退出吗？',
						success: (res) => {
							if (res.confirm) {
								this.textareaContent = '';
								this.uploadResults = [];
								uni.navigateBack({
									url: "pages/world/world"
								});
							}
						}
					});
				} else {
					// 如果没有数据，直接退出
					uni.navigateBack();
				}
			},
			opencinema(type) {
				if (this.isTagPopupOpen) {
					return
				}
				if (type == 1) {
					const vm = this;
					// #ifdef APP-PLUS
					// APP端直接调用相机
					uni.chooseImage({
						count: 1,
						sourceType: ['camera'],
						success: (res) => {
							res.tempFilePaths.forEach(img => {
								vm.imgs.push(img)
							});
						}
					});
					// #endif

					// #ifdef MP-WEIXIN
					// 小程序需要授权
					uni.authorize({
						scope: 'scope.camera',
						success() {
							uni.chooseImage({
								count: 1,
								sourceType: ['camera'],
								success: (res) => {
									res.tempFilePaths.forEach(img => {
										vm.imgs.push(img)
									});
								}
							});
						}
					});
					// #endif
				}
			},
			addimg() {
				const vm = this;
				if(vm.imgs.length >= 3) {
					uni.showToast({
						icon: 'none',
						title: '最多可选取三张哦~',
						duration: 1500
					})
					return
				}
				// #ifdef APP-PLUS
				uni.showActionSheet({
					itemList: ['拍照', '从相册选择'],
					success: (res) => {
						if (res.tapIndex === 0) {
							// 拍照
							uni.chooseImage({
								count: 3,
								sourceType: ['camera'],
								success: (res) => {
									res.tempFilePaths.forEach(img => {
										if(vm.imgs.length >= 3) return
										vm.imgs.push(img)
										vm.uploadImage(img);
									});
								},
								fail: (err) => {
									console.log('拍照失败：', err);
									uni.showToast({
										title: '拍照失败',
										icon: 'none',
										duration: 2000
									});
								}
							});
						} else {
							// 从相册选择
							uni.chooseImage({
								count: 3,
								sourceType: ['album'],
								success: (res) => {
									res.tempFilePaths.forEach(img => {
										if(vm.imgs.length >= 3) return
										vm.imgs.push(img)
										vm.uploadImage(img);
									});
								},
								fail: (err) => {
									uni.showToast({
										title: '打开相册失败',
										icon: 'none',
										duration: 2000
									});
								}
							});
						}
					}
				});
				// #endif

				// #ifdef MP-WEIXIN
					// 小程序的处理保持不变
					uni.authorize({
						scope: 'scope.camera',
						success() {
							uni.chooseImage({
								count: 6,
								sizeType: ['compressed'],
								sourceType: ['album'],
								success: (res) => {
									console.log(res);
									res.tempFilePaths.forEach(img => {
										if(vm.imgs.length >= 3) return
										vm.imgs.push(img)
										vm.uploadImage(img);
									});
								}
							});
						}
					});
				// #endif
			},
			addTagToTextarea(tag) {
				// 如果textarea已经有内容，就添加一个空格再添加标签内容
				this.textareaContent = this.textareaContent + (this.textareaContent ? ' ' : '') + '#' + tag;
				// 检查this.selectTags数组中是否已经包含该标签
				if (!this.selectTags.includes('#' + tag)) {
					// 如果不包含，则添加到数组中
					this.selectTags.push('#' + tag);
				}
			},
			handlePageClick(e) {
				// 判断点击的是否是输入框
				const target = e.target;
				if (!target.classList.contains('input') && !target.classList.contains('bottom-icons')) {
					// 如果不是输入框，隐藏键盘并重置底部图标位置
					uni.hideKeyboard();
				}
			},
			handleInputFocus() {
				this.isInputFocused = true;
				// 键盘弹起时，根据相机状态调整底部图标位置
				this.bottomIconsPosition = this.keyboardHeight + 10;
			},
			unopen() {
				uni.showToast({
					title: '该功能暂未开发',
					icon: 'none', // 使用'none'图标，只显示文字
					duration: 1000 // 显示持续时间
				});
			},
			handleInputBlur() {
				this.isInputFocused = false;
			},
			handleKeyboardHeightChange(e) {
				this.keyboardHeight = e.detail.height;
				// 键盘弹起时
				if (e.detail.height > 0) {
					this.bottomIconsPosition = e.detail.height + 10;
				}
			},
		},
		computed: {
			hasContentOrImages() {
				return this.textareaContent && this.textareaContent.trim() == '' || this.imgs.length>0;
			},
			selectedTagsCount() {
				return this.preselectTags.length; // 返回preselectTags数组的长度
			}
		},
		onLoad() {
			//#ifdef MP-WEIXIN
				this.isAPP = false;
			//#endif
			//#ifdef APP
				this.isAPP = true;
			//#endif 
			uni.getSystemInfo({
				success: (res) => {
					this.screenHeight = res.windowHeight;
					const bottomBarHeight = res.windowHeight * 1 / 100;
					// 将px转换为rpx
					const bottomBarHeightRpx = bottomBarHeight * (750 / res.windowWidth);
					this.bottomBarHeightRpx = bottomBarHeightRpx;
					this.bottomIconsPosition = bottomBarHeightRpx;
				}
			});
		},
		onUnload() {
			uni.offKeyboardHeightChange();
		}
	}
</script>

<style>
	.navbar-scroll {
		display: flex;
		position: fixed;
		overflow-x: auto;
		/* 允许横向滚动 */
		white-space: nowrap;
		/* 保持项目在一行显示 */
	}

	.delete-btn1 {
		position: absolute;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 35rpx;
		height: 35rpx;
		top: 50%;
		right: 10rpx;
		transform: translateY(-50%);
		cursor: pointer;
		z-index: 1;
	}

	.container111 {
		display: flex;
		/* 启用Flexbox布局 */
		align-items: center;
		/* 垂直居中对齐 */
		padding: 10rpx;
		/* 增加一些内边距 */
	}

	.delete-icon1 {
		width: 28rpx;
		height: 28rpx;
		display: block;
	}

	.iconfont {
		font-family: "iconfont" !important;
		font-size: 38rpx;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	.bg-blue {
		background-color: #19c1ff !important;
	}

	.delete-btn {
		position: absolute;
		top: 7rpx;
		right: -15rpx;
		left: 160rpx;
		width: 40rpx;
		height: 40rpx;
		background-color: white;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 50%;
		cursor: pointer;
	}

	.delete-icon {
		width: 50rpx;
		height: 40rpx;
	}


	.textarea-like {
		border: none;
		padding: 10px;
		resize: none;
		white-space: pre-wrap;
		position: relative;
	}

	.placeholder {
		position: absolute;
		top: 0;
		left: 0;
		color: #ccc;
		pointer-events: none;
	}

	.selectBox {
		position: absolute;
		left: -14rpx;
		width: 204rpx;
		height: 209rpx;
		margin: 6rpx;
		position: relative;

	}

	.container {
		position: relative;
		top: 0vh;
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		background-color: white;
	}

	/* iPhone 6/6s/7/8 的屏幕宽度为375px */
	@media screen and (min-height: 800px) {
		.container {
			top: 9vh;
		}
	}

	/* iPhone 6 Plus/6s Plus/7 Plus/8 Plus 的屏幕宽度为414px */
	.bg-grey {
		color: #f3f2f2;
	}

	.image-container {
		width: 175rpx;
		height: 200rpx;
		margin: 6rpx;
		position: relative;
	}

	.img2::before {
		content: '';
		position: absolute;
		top: 2px;
		right: 2px;
		width: 20px;
		height: 20px;
		border: 2px solid gray;
		border-radius: 50%;
		pointer-events: none;
	}


	.selected::before {
		background-color: blue;
		border-color: blue;
		color: white;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 14px;
	}

	.selected::before {
		content: attr(data-index);
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 12px;
	}

	.images-container {
		display: flex;
		flex-wrap: wrap;
		flex-direction: row;
		flex: 1;
		margin-left: 0;
	}

	.cinema1 {
		border: none;
		margin: 6rpx;
		background-color: #ededef;
		width: 175rpx;
		height: 200rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.img2 {
		width: 100%;
		height: 100%;
		object-fit: fill;
		box-sizing: border-box;
	}

	.img3 {
		width: 100%;
		height: 100%;
		object-fit: fill;
		box-sizing: border-box;
		border-radius: 10rpx;
	}

	.cin2 {
		height: 45px;
		width: 45px;
		align-self: center;
	}

	.pt {
		padding-top: 150px;
	}

	.main {
		background-position: 0 100%;
		min-height: 100vh;
		background-image: none;
		background-color: white;
	}

	.bg2 {
		background-color: #9fe1ff;
		height: 25rpx;
		width: 144rpx;
		padding-top: 15rpx;
		position: relative;
	}

	.bg3 {
		height: 25rpx;
		width: 144rpx;
	}

	.tags-container {
		display: flex;
		margin-right: 20rpx;
		overflow-x: auto;
		white-space: nowrap;
		gap: 10px;
		position: fixed;
		background-color: white;
		width: 100%;
	}

	.box1 {
		position: fixed;
		background-color: white;
		height: 70rpx;
		width: 100%;
		border: 1px solid #e2e2e2;
		border-bottom: none;
		z-index: 999;
		left: 0;
		/* #ifdef APP-PLUS */
			transform: translateY(-1px);
		/* #endif */
	}

	.img1 {
		width: 30rpx;
		height: 38rpx;
	}

	.tag {
		background-color: white;
		border-radius: 15px;
		margin: 3rpx;
		border: 1px solid #e2e2e2;
		padding: 5px 40px 5px 20px;
		color: #333;
		font-size: 14px;
		display: flex;
		align-items: center;
		margin-bottom: 5px;
		position: relative;
		min-height: 36rpx;
	}

	.tag1 {
		background-color: white;
		border-radius: 15px;
		margin: 3rpx;
		border: 1px solid #e2e2e2;
		padding: 5px 13px;
		color: #333;
		font-size: 14px;
		align-items: center;
		/* 垂直居中 */
		justify-content: center;
		display: flex;
		align-items: center;
		margin-bottom: 5px;
		position: relative;
		white-space: nowrap;
		word-wrap: break-word;
		height: 36rpx;
	}

	.topic-list {
		margin-bottom: 10rpx;
		display: flex;
		flex-wrap: wrap;
	}

	.topic-box {
		display: inline-block;
		margin: 0 10rpx 10rpx 0;
		background: #F0F7FF;
		border-radius: 8rpx;
		padding: 4rpx 16rpx;
	}

	.topic-content {
		display: flex;
		align-items: center;
	}

	.topic-hash {
		color: #18c3ff;
		font-size: 28rpx;
		margin-right: 2rpx;
		font-weight: bold;
	}

	.topic-name {
		font-size: 28rpx;
	}

	.bottom-icons {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		transition: all 0.3s;
		z-index: 100;
	}

	.input {
		position: relative;
		z-index: 1;
	}

	.camera-container {
		margin-bottom: 0;
		padding-bottom: 0;
	}
</style>